<template>
    <div class="app-container">
        <el-form label-width="120px">
            <el-form-item label="讲师名称">
                <el-input v-model="teacher.name"/>
            </el-form-item>
            <el-form-item label="讲师排序">
                <el-input-number v-model="teacher.sort" controls-position="right" :min='0'/>
            </el-form-item>
            <el-form-item label="讲师头衔">
                <el-select v-model="teacher.level" clearable placeholder="请选择">
                    <!--

                      数据类型一定要和取出的json中的一致，否则没法回填

                      因此，这里value使用动态绑定的值，保证其数据类型是number

                    -->
                    <el-option :value="1" label="高级讲师"/>
                    <el-option :value="2" label="首席讲师"/>
                </el-select>
            </el-form-item>
            <el-form-item label="讲师资历">
                <el-input v-model="teacher.career"/>
            </el-form-item>
            <el-form-item label="讲师简介">
                <el-input v-model="teacher.intro" :rows="10" type="textarea"/>
            </el-form-item>
            <!-- 讲师头像 -->
            <el-form-item label="讲师头像">
                <!-- 头衔缩略图 -->
                <pan-thumb :image="teacher.avatar"/>
                <!-- 文件上传按钮 -->
                <el-button type="primary" icon="el-icon-upload" @click="imageCropperShow=true">更换头像
                </el-button>
                <!--
              v-show：是否显示上传组件
              :key：类似于id，如果一个页面多个图片上传控件，可以做区分
              :url：后台上传的url地址
              @close：关闭上传组件
              @crop-upload-success：上传成功后的回调 -->
                <image-cropper
                    v-show="imageCropperShow"
                    :width="300"
                    :height="300"
                    :key="imageCropperKey"
                    :url="BASE_API+'/eduOss/fileOss'"
                    field="file"
                    @close="close"
                    @crop-upload-success="cropSuccess"/>
            </el-form-item>
            <el-form-item>
                <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
	import teacherApi from '@/api/edu/teacher'
    import ImageCropper from '@/components/ImageCropper'
    import PanThumb from '@/components/PanThumb'
	// import teacher from "../../../api/teacher";
	export default {
        components:{
			ImageCropper,PanThumb
        },
		data() {
			return {
				teacher: {
					name: '',
					sort: 0,
					level: 1,
					career: '',
					intro: '',
					avatar: ''
				},
				//上传组件是否显示
				imageCropperShow: false,
				saveBtnDisabled: false,
				imageCropperKey:0,//上传组件key值
				BASE_API:process.env.BASE_API, //获取dev.env.js里面地址
				isUpdate: false,
			}
		},
		created() {
			this.init()
		},
		watch: {
			$route(to, from) {//路由发生变化,方法执行
				this.init()
			}
		},
		methods: {
			init() {
				if (this.$route.params && this.$route.params.id) {
					const id = this.$route.params.id
					this.getInfo(id);
					this.isUpdate = true;
				} else {
					//清空该表单
					this.teacher = {}
					this.isUpdate = false;
				}
			},
			saveOrUpdate() {
				if (this.isUpdate) {
					this.update()
				} else {
					this.save()
				}
			},
			update() {
				teacherApi.update(this.teacher).then(response => {
					//提示信息
					this.$message({
						type: 'success',
						message: '修改成功!'
					});
					//回到列表页面 路由跳转
					this.$router.push({
						path: '/teacher/table'
					})
				})
			},
			save() {
				teacherApi.add(this.teacher).then(response => {
					//提示信息
					this.$message({
						type: 'success',
						message: '添加成功!'
					});
					//回到列表页面 路由跳转
					this.$router.push({
						path: '/teacher/table'
					})
				})
			},
			getInfo(id) {
				teacherApi.getById(id).then(response => {
					this.teacher = response.data.teacher;
				})
			},
            close(){
				//关闭上传弹窗
                this.imageCropperShow = false
				//上传组件初始化
				this.imagecropperKey = this.imagecropperKey+1
            },
            //上传成功
			cropSuccess(data){
                this.teacher.avatar = data.url
				this.imageCropperShow = false
                //上传组件初始化
				this.imagecropperKey = this.imagecropperKey+1
            }
		}
	}
</script>

<style scoped>

</style>